<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-input v-model="listQuery.appName" placeholder="名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->
      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 250px;"
        type="daterange"
        value-format="yyyy-MM-dd"
      />
      <el-select
        v-model="listQuery.channelId"
        filterable
        clearable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          v-for="item in channelOptions"
          :key="item.channelId"
          :label="item.channel_name"
          :value="item.channelId"
        />
      </el-select>
      <el-select
        v-model="listQuery.appId"
        filterable
        clearable
        :filter-method="appdataFilter"
        placeholder="选择应用名称"
        style="width: 150px;"
        class="filter-item"
      >
        <el-option
          v-for="(item, index) in appoptions"
          :key="index"
          :label="item.appName"
          :value="item.appId"
        />
      </el-select>
      <el-select
        v-model="listQuery.state"
        clearable
        placeholder="上下架"
        style="width: 200px;"
        class="filter-item"
      >
        <el-option :value="0" label="下架">下架</el-option>
        <el-option :value="1" label="上架">上架</el-option>
        <el-option :value="null" label="全部">全部</el-option>
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        :loading="btnLoading"
        @click="handleExport"
      >
        导出
      </el-button>

      <el-popover placement="left" width="300" trigger="click">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 5px 0;"></div>
        <el-checkbox-group
          v-model="checkList"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            v-for="item in columnName"
            :label="item"
            :key="item"
          ></el-checkbox>
        </el-checkbox-group>
        <el-button
          slot="reference"
          class="filter-item"
          type="primary"
          style="float:right"
          >显示列</el-button
        >
      </el-popover>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        label="编号"
        prop="id"
        align="center"
        min-width="80"
        v-if="checkList.indexOf('编号') != -1"
      >
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="应用图标"
        class-name="status-col"
        min-width="100"
        v-if="checkList.indexOf('应用图标') != -1"
      >
        <template slot-scope="{ row }">
          <!-- {{ row.icon }} -->
          <img :src="row.icon" alt="" style="width: 26px;height:26px" />
        </template>
      </el-table-column>
      <el-table-column
        label="应用名称"
        min-width="160"
        align="center"
        v-if="checkList.indexOf('应用名称') != -1"
      >
        <template slot-scope="{ row }">
          <span>{{ row.appName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="显示申请数量"
        min-width="200"
        align="center"
        v-if="checkList.indexOf('显示申请数量') != -1"
      >
        <template slot-scope="{ row }">
          {{ row.applyCount }}
        </template>
      </el-table-column>
      <el-table-column
        label="访问量"
        min-width="80"
        align="center"
        v-if="checkList.indexOf('访问量') != -1"
      >
        <template slot-scope="{ row }">
          <span>{{ row.all === null ? '' : row.all }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="用户唯一访问量"
        min-width="120"
        align="center"
        v-if="checkList.indexOf('用户唯一访问量') != -1"
      >
        <template slot-scope="{ row }">
          <span>{{ row.unique === null ? '' : row.unique }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="推送量"
        min-width="120"
        align="center"
        v-if="checkList.indexOf('推送量') != -1"
      >
        <template slot-scope="{ row }">
          <span>{{ row.unique === null ? '' : row.applyNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="推送成功量"
        min-width="120"
        align="center"
        v-if="checkList.indexOf('推送成功量') != -1"
      >
        <template slot-scope="{ row }">
          <span>{{ row.unique === null ? '' : row.totalRecords }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="成功量"
        min-width="120"
        align="center"
        v-if="checkList.indexOf('成功量') != -1"
      >
        <template slot-scope="{ row }">
          <span>{{ row.unique === null ? '' : row.incomeQuality }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="联登注册量" min-width="120" align="center" v-if="checkList.indexOf('联登注册量')!=-1">
        <template slot-scope="{ row }">
          <span>{{ row.lgncnt }}</span>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="appCount"
    />
  </div>
</template>

<script>
const column = [
  '编号',
  '应用图标',
  '应用名称',
  '显示申请数量',
  '访问量',
  '用户唯一访问量'
];
import { appCount, getLoanAppList, reportLoan } from '@/api/sys';
import { getChannelIdAndNick } from '@/api/user';

import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
export default {
  name: 'LoanCount',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      checkList: [
        '编号',
        '应用图标',
        '应用名称',
        '显示申请数量',
        '访问量',
        '用户唯一访问量',
        '撞库量',
        '推送量',
        '推送成功量',
        '成功量'
      ],
      columnName: column,
      limitNum: 1,
      fileList: [],
      comment: '',
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        startTime: '',
        endTime: '',
        state: null,
        channelId: ''
      },
      times: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      timeNow: [
        new Date(new Date().toLocaleDateString()).getTime(),
        new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000
      ],
      // timeNow: [
      //   Date.parse(new Date()),
      //   Date.parse(new Date()) + 24 * 60 * 60 * 1000
      // ],
      dialogPvVisible: false,
      pvData: [],
      appoptionsCopy: [],
      appoptions: [],
      channelOptions: [],
      channelOptionsCopy: [],
      downloadLoading: false,
      listLoading: false,
      btnLoading: false
    };
  },
  created() {
    this.appCount(this.listQuery);
    this.getLoanAppList();
    this.getChannelIdAndNick();
    this.times = [
      this.timestampToTime(this.timeNow[0]),
      this.timestampToTime(this.timeNow[1])
    ];
    this.listQuery.endTime = this.times[1];
    this.listQuery.startTime = this.times[0];
  },
  methods: {
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + '-';
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-';
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      return Y + M + D;
    },
    handleCheckAllChange(val) {
      this.checkList = val ? column : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.columnName.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.columnName.length;
    },
    handleExport() {
      this.btnLoading = true;
      reportLoan(this.listQuery).then(res => {
        if (res.data.code === 200) {
          this.btnLoading = false;
          window.location.href = res.data.data;
        } else {
          this.btnLoading = true;
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    appdataFilter(val) {
      this.value = val;
      if (val) {
        // val存在
        this.appoptions = this.appoptionsCopy.filter(item => {
          if (
            !!~item.appName.indexOf(val) ||
            !!~item.appName.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        // val为空时，还原数组
        this.options = this.optionsCopy;
      }
    },
    dataFilter(val) {
      this.value = val;
      if (val) {
        // val存在
        this.channelOptions = this.channelOptionsCopy.filter(item => {
          if (
            !!~item.channel_name.indexOf(val) ||
            !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        // val为空时，还原数组
        this.channelOptions = this.channelOptionsCopy;
      }
    },
    async getLoanAppList() {
      const res = await getLoanAppList();
      res.data.data.forEach(element => {
        this.appoptionsCopy.push(element);
        this.appoptions.push(element);
      });
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery);
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.channelOptionsCopy.push(element);
          this.channelOptions.push(element);
        }
      });
    },
    // 获取列表
    async appCount(listQuery) {
      if (this.times == null) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else if (this.times.length === 0) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else {
        this.listQuery.endTime = this.times[1];
        this.listQuery.startTime = this.times[0];
      }
      const res = await appCount(this.listQuery);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    handleFilter() {
      this.listQuery.current = 1;
      if (this.listQuery.startTime === null) {
        this.listQuery.startTime = '';
      }
      if (this.listQuery.endTime === null) {
        this.listQuery.endTime = '';
      }
      this.appCount(this.listQuery);
    },
    cancel() {
      this.dialogFormVisible = false;
      this.appCount();
    },
    resetTemp() {
      this.loan = {
        id: undefined,
        username: '',
        gmtDatetime: '',
        state: 0
      };
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = 'create';
      this.dialogFormVisible = true;
      // 刷新表单数据验证提示
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate();
      });
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? 'ascending' : 'descending';
    }
  }
};
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}
.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
